<template>
  <el-container style="margin: 0 auto; padding: 0 0; width: 100%; height: 96%;">
    <el-header style="background: white; padding: 0 0; border-top-left-radius: 10px; border-top-right-radius: 10px" height="35px">
      <el-row>
        <el-col :span="2" style="margin-left: 1%; margin-top: 1%;">
          <div class="windows_title">
            <button class="intro_close_btn" @mouseover="btnMouseOver = true" @mouseleave="btnMouseOver = false" @click="closeWindows">
              <i class="el-icon-close" v-show="btnMouseOver"></i>
            </button>
            <button class="intro_task_btn" @mouseover="btnMouseOver = true" @mouseleave="btnMouseOver = false" @click="">
              <i class="el-icon-minus" v-show="btnMouseOver"></i>
            </button>
            <button class="intro_window_btn" @mouseover="btnMouseOver = true" @mouseleave="btnMouseOver = false" @click="">
              <i class="el-icon-rank" v-show="btnMouseOver"></i>
            </button>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="background: white; padding: 0 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px">
      <component :is="resultComps[app.activeName]"></component>
    </el-main>
  </el-container>
</template>

<script>
import resultComps from "@/components/application";
export default {
  props: {
    app: Object
  },
  name: "SystemApplicationWindows",
  data(){
    return{
      btnMouseOver: false,
      resultComps: resultComps
    }
  },

  methods: {
    closeWindows(){
      var comp = this.$store.getters.focusApp;
      comp.isOpen = false
      comp.status = 3
      this.$store.commit('removeTaskList', comp)
    }

  }
}
</script>

<style scoped>
.windows_title{
  width: 100%;
  /*height: 2.5rem;*/
  border-radius: 1rem;
  /*background: rgba(0,0,0,0.5);*/
}

.intro_btn{
  width: 100%;
  /*!*border: 1px solid black;*!*/
  /*overflow: hidden;*/
  /*!*border: 1px solid black;*!*/
  /*margin: 1% 1%;*/
  border: 1px solid black;
}

.intro_close_btn{
  width: 1rem;
  height: 1rem;
  border: .1rem solid black;
  border-radius: 1rem;
  padding: 0 0;
  float: left;
  margin-right: .4rem;
  background-color: #FF7F50; /*珊瑚色*/
}

.intro_task_btn{
  width: 1rem;
  height: 1rem;
  border: .1rem solid black;
  border-radius: 1rem;
  padding: 0 0;
  float: left;
  margin-right: .4rem;
  background: #FFD700; /*金色*/
}

.intro_window_btn{
  width: 1rem;
  height: 1rem;
  border: .1rem solid black;
  border-radius: 1rem;
  padding: 0 0;
  float: left;
  background: #00FF7F; /*薄荷奶绿*/
}
</style>